<template>
  <div>
       <el-progress :percentage="p" v-bind="$attrs"/>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';

let props = defineProps({
  // 进度条百分比
  percentage: {
    type: Number,
    default: 0,
  },
  // 是否显示动画
  isAnimation: {
    type: Boolean,
    default: false,
  },
  // 动画时间 毫秒
  time: {
    type: Number,
    default: 1000,
  },
})
let p = ref(0)
onMounted(() => {
  // 动画效果
  if (props.isAnimation) {
    //每个单位时间增加的百分比
    let t= Math.ceil(props.time / props.percentage);
    let timer = setInterval(() => {
      p.value += 1;
      if(p.value >= props.percentage){
        p.value = props.percentage;
        clearInterval(timer);
      }
    }, t);
  }else{
    p.value = props.percentage;
  }
})
</script>

<style scoped lang='scss'>
:deep(svg) {
  width: 100px;
  height: 100px;
}
</style>  